import Image from 'next/image'
import React from 'react'
import { assets } from '../../../assets/assets'

const Contact = () => {
  return (
    <div
      id="contact"
      className="w-full px-[12%] py-10 scroll-mt-20 bg-[url('/footer-bg-color.png')] bg-no-repeat bg-[50%_35%] bg-[lenght:90%_auto]"
    >
      <h4 className="text-center mb-2 text-lg">Connect with me</h4>
      <h2 className="text-center text-5xl">get in touch</h2>
      <p className="text-center max-w-2xl mx-auto mt-5 mb-12 ">
        I'd love to hear from you! Whether you have a question, a project in
        mind, or just want to say hi, I'm here to listen. Don't hesitate to
        reach out, and let's start a conversation.
      </p>
      <form className="max-w-2xl mx-auto">
        <div className="grid grid-cols-auto gap-6 mt-10 mb-8">
          <input
            type="text"
            placeholder="enter your name "
            required
            className="flex-1 p-3 outline-none border-[0.5px] border-gray-400 rounded-md bg-white"
          />
          <input
            type="email"
            placeholder="enter your email "
            required
            className="flex-1 p-3 outline-none border-[0.5px] border-gray-400 rounded-md bg-white"
          />
        </div>
        <textarea
          name=""
          id=""
          cols="30"
          rows="6"
          placeholder="enter your message"
          required
          className="w-full p-4 outline-none border-[0.5px] border-gray-400 rounded-md bg-white mb-6"
        ></textarea>
        <button
          type="submit"
          className="py-3 px-8 w-max flex items-center justify-between gap-2 bg-black/80 text-white rounded-full mx-auto hover:bg-black duration-500"
        >
          submit now
          <Image src={assets.arrowWhite} alt="" className="w-4" />
        </button>
        {/* <p className="mt-4">sending....</p> */}
      </form>
    </div>
  )
}

export default Contact
